<template>
    <div>
        <a-spin :spinning="pageloading" tip="Loading...">
        
        <div>
            选择时间：<a-range-picker @change="onChange" /><a-button type="primary" @click="query">查询</a-button>
        </div>
        <div>
            <div class="member_row">
                <div><span class="member_row_label">全部用户: </span> <span class="blueColor member_row_text">{{member.totalMember}}</span> </div>
                <div><span class="member_row_label">当日注册: </span> <span class="blueColor member_row_text">{{member.todayMember}}</span> </div>
                <div><span class="member_row_label">当月注册: </span> <span class="blueColor member_row_text">{{member.monthMember  }}</span> </div>
            </div>
            <a-divider style="margin-bottom: 32px"/>
            <div class="member_row">
                <div><span class="count_row_label">剩余积分: </span> <span class="greenColor count_row_text">{{count.total}}</span> </div>
                <div><span class="count_row_label">冻结积分: </span> <span class="greenColor count_row_text">{{count.freeze}}</span> </div>
                <div><span class="count_row_label">已提现积分: </span> <span class="greenColor count_row_text">{{count.outAmount}}</span> </div>
                <div><span class="count_row_label">完成积分: </span> <span class="greenColor count_row_text">{{count.complete}}</span> </div>
            </div>
            <a-divider style="margin-bottom: 32px"/>
            <div style="padding-left:40px">
                <div class="row_title">抖音：</div>
                <detail-list :col='4'>
                    <detail-list-item term="总发布量">{{list.dy && list.dy.total}}</detail-list-item>
                    <detail-list-item term="当前已完成">{{list.dy && list.dy.complete}}</detail-list-item>
                    <detail-list-item term="当前完成积分">{{list.dy && list.dy.completeIntegral}}</detail-list-item>
                    <detail-list-item term="前冻结积分">{{list.dy && list.dy.freezeIntegral}}</detail-list-item>
                </detail-list> 
            </div>
            <a-divider style="margin-bottom: 22px"/>
            <div style="padding-left:40px">
                <div class="row_title">火山：</div>
                <detail-list :col='4'>
                    <detail-list-item term="总发布量">{{list.hs && list.hs.total}}</detail-list-item>
                    <detail-list-item term="当前已完成">{{list.hs && list.hs.complete}}</detail-list-item>
                    <detail-list-item term="当前完成积分">{{list.hs && list.hs.completeIntegral}}</detail-list-item>
                    <detail-list-item term="前冻结积分">{{list.hs && list.hs.freezeIntegral}}</detail-list-item>
                </detail-list> 
            </div>
            <a-divider style="margin-bottom: 22px"/>
            <div style="padding-left:40px">
                <div class="row_title">小红书：</div>
                <detail-list :col='4'>
                    <detail-list-item term="总发布量">{{list.xhs && list.xhs.total}}</detail-list-item>
                    <detail-list-item term="当前已完成">{{list.xhs &&  list.xhs.complete}}</detail-list-item>
                    <detail-list-item term="当前完成积分">{{list.xhs &&  list.xhs.completeIntegral}}</detail-list-item>
                    <detail-list-item term="前冻结积分">{{list.xhs &&  list.xhs.freezeIntegral}}</detail-list-item>
                </detail-list> 
            </div>
            <a-divider style="margin-bottom: 22px"/>
            <div style="padding-left:40px">
                <div class="row_title">快手：</div>
                <detail-list :col='4'>
                    <detail-list-item term="总发布量">{{list.ks && list.ks.total}}</detail-list-item>
                    <detail-list-item term="当前已完成">{{list.ks && list.ks.complete}}</detail-list-item>
                    <detail-list-item term="当前完成积分">{{list.ks && list.ks.completeIntegral}}</detail-list-item>
                    <detail-list-item term="前冻结积分">{{list.ks && list.ks.freezeIntegral}}</detail-list-item>
                </detail-list> 
            </div>
            <a-divider style="margin-bottom: 22px"/>
        </div>
        </a-spin>
    </div>
</template>

<script>
import { dashboard } from '@/api/getData'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item
export default {
    name: 'Control',
    components: {
        DetailList,
        DetailListItem
    },
    data () {
        return{
           start: '' ,
           end: '',
           member: {},
           count: {},
           list: {},
           pageloading: false
        }
    },
    mounted(){
        this.query()
    },
    methods: {
        onChange(date, dateString) {
            console.log(date[0]._d.getTime(), date[1]._d.getTime());
            this.start = date[0]._d.getTime()
            this.end = date[1]._d.getTime()
        },
        query(){
            this.pageloading = true
            dashboard(this.start,this.end).then(res=>{
                console.log(res)
                this.member = res.data.member
                this.count = res.data.count
                this.list = res.data.list
            }).finally(e=>{
                this.pageloading = false
            })
        }
    }
}
</script>

<style>
.member_row{
    display: flex;
    justify-content: space-around;
    margin: 32px 0;
}
.member_row_label{
    font-size: 24px;
}
.member_row_text{
    font-size: 68px;
    padding: 0 20px;
}
.count_row_label{
    font-size: 18px;
}
.count_row_text{
    font-size: 48px;
    padding: 0 14px;
}
.row_title{
    font-size: 26px;
    margin-bottom: 20px
}
</style>

